<template>
    <div>
        <el-cascader style="width:100%;"
            v-model="selectArray"
            :options="options"
            :show-all-levels="true"
            :props="{ checkStrictly: true, value:valueField, label:labelField, children:childrenField}"
            @change="onChange">
        </el-cascader>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            selectArray: []
        }
    },
    props: {
        value: '',
        valueField: {
            type: String,
            default: 'value'
        },
        labelField: {
            type: String,
            default: 'label'
        },
        childrenField: {
            type: String,
            default: 'children'
        },
        options: Array
    },
    created: function() {
        this.loadValue();
    },
    methods: {
        loadValue: function() {
            if(this.value != null) {
                // console.log('load value', this.value);
                // this.selectArray = [ this.value ];
                var list = this.getLinked2(this.value);
                this.selectArray = list;
            }
        },
        // 双向绑定 input 事件
        onChange: function(selectArray) {
            // console.log('onChange');
            var length = selectArray.length;
            if(length == 0) {
                this.$emit('input', null);    
            } else {
                // console.log('selectArray', selectArray);
                // console.log('selectArrayOne', selectArray[length - 1]);
                // 触发 value watch ?
                this.$emit('input', selectArray[length - 1]);
            }
        },
        // 递归获取所有选项
        getLinked: function(options, value, arr, lastValue) {
            // console.log('lastValue', lastValue);
            for(var i in options) {
                var option = options[i];
                var value2 = option[this.valueField];
                // 找到了 value
                if(value2 == value) {
                    if(lastValue != null) {
                        arr.push(lastValue);
                    }
                    arr.push(value);
                    return true;
                }
                var children = option.children;
                if(children != null) {
                    if(this.getLinked(children, value, arr, value2)) {
                        return true;
                    }
                }
            }
            return null;
        },
        getLinked2: function(value) {
            var arr = [];
            var linked = this.getLinked(this.options, value, arr);
            // console.log('arr', arr);
            return arr;
        },
        
    },
    watch: {
        // 双向绑定 对于 props 流入的数据需要显示
        value: function(v) {
            // this.selectArray = [ this.value ];
            var list = this.getLinked2(v);
            // 判断list是否和selectArray相等
            if(!Util.isArrayEqual(list, this.selectArray)) {
                this.selectArray = list;
            } else {
                // 通常是 select-level 组件内部的操作导致的变化
                // console.log('is equal not need update son component');
            }
            // console.log('list', list);
        }
    },
}
</script>